<template>
  <div class="lottery-index page">
    <div class="header header_area_100">
      <van-nav-bar left-arrow @click-left="clickLeft">
        <template #title>
          <span @click="showMenu">
            {{ services[currentId] ? services[currentId].name : '' }}
          <i class="van-badge__wrapper van-icon van-icon-arrow-down icon" :class="menuShow ? 'up' : 'down'"
             style="margin-left: .2rem; font-size: 14px; color: #fa59b5"/>
          </span>
        </template>
        <template #right>
          <span style="color: #fa59b5" @click="gotoRecord">打赏记录</span>
        </template>
      </van-nav-bar>
    </div>
    <div class="record">
      <div class="period" v-if="currentInfo">
        <span>距 第</span>
        <span class="period-number">{{ currentInfo.next_expect }}</span>
        <span class="margin-span">期 期截止</span>
        <div class="van-count-down">
          <div class="clock">
            <span class="text">{{ times.h }}</span>
            <span class="label">:</span>
            <span class="text">{{ times.m }}</span>
            <span class="label">:</span>
            <span class="text">{{ times.s }}</span>
          </div>
        </div>
      </div>
      <div class="recent">
        <span>第</span>
        <span class="period-span">{{ currentInfo.now_expect }}</span>
        <span>期</span>
        <div class="kuaisan-ball" v-if="!currentInfo.dx || !currentInfo.ds">
          <span class="res-wait middle">正在统计</span>
        </div>
        <div class="kuaisan-ball" v-else>
          <span class="res-des middle">{{ currentInfo.dx === 1 ? '嘉年华' : '直升机' }}</span>
          <span class="res-des middle">{{ currentInfo.ds === 1 ? '保时捷' : '火箭' }}</span>
        </div>
        <i class="van-badge__wrapper van-icon van-icon-arrow-down icon" :class="!this.historyShow ? 'down' : 'up'"
           style="font-size: 14px;"
           @click="showHistory"/>
      </div>
    </div>
    <div class="wrapper black-bg">
      <div class="options-bar">
        <div class="right">
          <div class="linear-gradient"
               style="background: linear-gradient(to right, rgba(227, 138, 251, 0), rgb(250, 89, 181), rgba(227, 138, 251, 0));"></div>
          <div class="sumValueTwoSides">
            <div class="bet-btn-div">
              <div class="rectangle large" v-for="(item, index) in rewardType" :key="'type_' + index"
                   @click="clickReward(item.name)" :class="type[item.name]? 'active' : ''">
                <div class="wrapper black-bg">
                  <div class="content space-between-div">
                    <p class="name-text large">{{ item.name }}</p>
                    <img :src="require('../assets/img/tip/odds-big.png')" v-if="index==0">
                    <img :src="require('../assets/img/tip/odds-small.png')" v-if="index==1">
                    <img :src="require('../assets/img/tip/odds-odd.png')" v-if="index==2">
                    <img :src="require('../assets/img/tip/odds-even.png')" v-if="index==3">
                  </div>
                </div>
              </div>
            </div>
            <div class="show-mall-div high-light-bg">
              <ul>
                <li><img><span>艺人网（北京）文化传媒</span></li>
                <li>
                  本次数据作为直播间广告商品人气置顶商品排行榜,完成打赏后可免费开通观看视频/直播以及获取额外赠送的礼品。
                </li>
                <li>与主播私下约啪</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div class="bottom-bar black-bg">
        <div class="bar black-bg">
          <div class="left">
            <div class="item"><span class="text">重置</span></div>
          </div>
          <div class="mid">
            <van-field v-model="amount" class="input" type="number" input-align="center"/>
          </div>
          <div class="right" @click="reward">打赏</div>
        </div>
        <div class="wrapper active">
          <div class="item">
            <div class="part">
              <span>总票数</span>
              <span class="number">{{ voteCount }}</span>
              <span class="margin-span">次</span>
              <span class="number">{{ voteAmount }}</span>
            </div>
            <div class="part"><span>账户余额: {{ this.balanceShow ? userInfo.money : "***" }} </span>
              <i class="van-badge__wrapper van-icon"
                 :class="(this.balanceShow ? 'van-icon-eye':'van-icon-closed-eye') + ' eye-icon'" @click="showBalance"/>
            </div>
          </div>
        </div>
        <div class="van-number-keyboard" style="display: none;">
          <div class="van-number-keyboard__body">
            <div class="van-number-keyboard__keys">
              <div class="van-key__wrapper">
                <div role="button" tabindex="0" class="van-key">1</div>
              </div>
              <div class="van-key__wrapper">
                <div role="button" tabindex="0" class="van-key">2</div>
              </div>
              <div class="van-key__wrapper">
                <div role="button" tabindex="0" class="van-key">3</div>
              </div>
              <div class="van-key__wrapper">
                <div role="button" tabindex="0" class="van-key">4</div>
              </div>
              <div class="van-key__wrapper">
                <div role="button" tabindex="0" class="van-key">5</div>
              </div>
              <div class="van-key__wrapper">
                <div role="button" tabindex="0" class="van-key">6</div>
              </div>
              <div class="van-key__wrapper">
                <div role="button" tabindex="0" class="van-key">7</div>
              </div>
              <div class="van-key__wrapper">
                <div role="button" tabindex="0" class="van-key">8</div>
              </div>
              <div class="van-key__wrapper">
                <div role="button" tabindex="0" class="van-key">9</div>
              </div>
              <div class="van-key__wrapper van-key__wrapper--wider">
                <div role="button" tabindex="0" class="van-key">0</div>
              </div>
              <div class="van-key__wrapper">
                <div role="button" tabindex="0" class="van-key">.</div>
              </div>
            </div>
            <div class="van-number-keyboard__sidebar">
              <div class="van-key__wrapper">
                <div role="button" tabindex="0" class="van-key van-key--large van-key--delete">
                  <svg class="van-key__delete-icon" viewBox="0 0 32 22">
                    <path
                        d="M28.016 0A3.991 3.991 0 0132 3.987v14.026c0 2.2-1.787 3.987-3.98 3.987H10.382c-.509 0-.996-.206-1.374-.585L.89 13.09C.33 12.62 0 11.84 0 11.006c0-.86.325-1.62.887-2.08L9.01.585A1.936 1.936 0 0110.383 0zm0 1.947H10.368L2.24 10.28c-.224.226-.312.432-.312.73 0 .287.094.51.312.729l8.128 8.333h17.648a2.041 2.041 0 002.037-2.04V3.987c0-1.127-.915-2.04-2.037-2.04zM23.028 6a.96.96 0 01.678.292.95.95 0 01-.003 1.377l-3.342 3.348 3.326 3.333c.189.188.292.43.292.679 0 .248-.103.49-.292.679a.96.96 0 01-.678.292.959.959 0 01-.677-.292L18.99 12.36l-3.343 3.345a.96.96 0 01-.677.292.96.96 0 01-.678-.292.962.962 0 01-.292-.68c0-.248.104-.49.292-.679l3.342-3.348-3.342-3.348A.963.963 0 0114 6.971c0-.248.104-.49.292-.679A.96.96 0 0114.97 6a.96.96 0 01.677.292l3.358 3.348 3.345-3.348A.96.96 0 0123.028 6z"
                        fill="currentColor"></path>
                  </svg>
                </div>
              </div>
              <div class="van-key__wrapper">
                <div role="button" tabindex="0" class="van-key van-key--blue van-key--large">完成</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="history-mask" v-if="this.historyShow || this.confirmShow"></div>
      <div class="history" v-if="this.historyShow">
        <van-pull-refresh v-model="refresh" success-text="刷新成功" @refresh="onRefresh">
          <template #default>
            <div class="wrapper">
              <div class="item even">
                <div class="left font-weight">期号</div>
                <div class="right font-weight font-12" style="color: #fa59b5">正确打赏</div>
              </div>
              <div class="item" :class="index % 2 ===0 ? 'odd' : 'even'" v-for="(item, index) in historyList"
                   :key="item.expect">
                <div class="left">{{ item.expect }}</div>
                <div class="right">
                  <div class="kuaisan-ball center">
                    <span class="res-des small">{{ item.dx === 1 ? '嘉年华' : '直升机' }}</span>
                    <span class="res-des small">{{ item.ds === 1 ? '保时捷' : '火箭' }}</span>
                  </div>
                </div>
              </div>
            </div>
          </template>
        </van-pull-refresh>
      </div>
    </div>
    <div class="icon-sx-div">
      <i class="van-badge__wrapper iconfont iconfont-sx icon" style="font-size: 25px;" @click="refreshPage"/>
    </div>
    <!-- 服务选择 -->
    <div v-if="menuShow" class="van-overlay mask" data-v-6a1c3c34="" style="z-index: 101; animation-duration: 0.35s;">
      <div class="list" data-v-6a1c3c34="">
        <div class="group" data-v-6a1c3c34="">
          <div class="wrapper" data-v-6a1c3c34="">
            <div class="item" data-v-6a1c3c34="" v-for="item in serviceList" :key="item.id"
                 @click="changeMenu(item.id)">
              <div class="cover" data-v-6a1c3c34=""><span class="name" data-v-6a1c3c34="">{{ item.name }}</span></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-if="confirmShow" class="confirm-order-modal">
      <div class="head van-hairline--bottom">
        <p class="text">数据单</p>
        <i class="van-badge__wrapper van-icon van-icon-cross close" style="font-size: 20px;" @click="closeDialog"/>
      </div>
      <ul class="list">
        <div class="li-item"><span>{{ currentInfo.name }}</span>
          <span class="color-span">{{ currentInfo.next_expect }}</span>
          <span>打赏</span>
        </div>
        <div class="li-item">
          <span>打赏确认</span>
        </div>
      </ul>
      <div class="sub-bar">
        <van-button class="item cancel-btn" @click="clearReward" text="清空任务单"/>
        <van-button class="item sub-btn" @click="submitReward" text="确认提交"/>
      </div>
    </div>
  </div>
</template>
<script>
import {Toast} from "vant";
import {getLotteryInfo, getRewardType, getServiceList} from "@api/Service";
import {getHistory, reward} from "@api/Live";
import {mapGetters} from "vuex";

export default {
  name: "LiveReward",
  computed: {
    voteCount: function () {
      let that = this, count = 0;
      Object.keys(this.type).forEach(v => {
        if (that.type[v])
          count++;
      })
      return count;
    },
    voteAmount: function () {
      let _amount = this.amount || 0;
      return parseInt(this.voteCount * _amount);
    },
    ...mapGetters(["userInfo"])
  },
  watch: {
    "$route.params.id": function (n) {
      if (n) {
        this.currentId = n;
        this.initRewardType();
      }
    }
  },
  activated() {
    this.$store.dispatch("UpdateUserInfo");
  },
  created() {
    if (this.$route.params.services)
      this.serviceList = this.$route.params.services;
    this.currentId = this.$route.params.id || 0;
    if (!this.serviceList || this.serviceList.length === 0) {
      this.initService();
    } else {
      this.serviceList.forEach(v => {
        this.services[v.id + ""] = v;
      })
      this.initRewardType();
      this.initLotteryInfo();
    }
    this.initTimer();
  },
  data: function () {
    return {
      timer: undefined,
      times: {
        s: 0,
        m: 0,
        h: 0
      },
      endTime: 0,
      currentInfo: {},
      historyList: [],
      serviceMap: {},
      serviceList: [],
      type: {},
      rewardType: [],
      amount: "",
      currentId: 0,
      services: {},
      menuShow: false,
      balanceShow: true,
      historyShow: false,
      confirmShow: false,
      refresh: false,
      reward_jnh: false,
      reward_zsj: false,
      reward_bsj: false,
      reward_hj: false
    }
  },
  methods: {
    initLotteryInfo: function () {
      getLotteryInfo(this.services[this.currentId]).then(v => {
        this.currentInfo = v.data;
        this.endTime = new Date().getTime() + this.currentInfo.second * 1000;
      });
      getHistory(this.services[this.currentId]).then(v => {
        this.historyList = v.data;
      })
    },
    initService: function () {
      let that = this;
      getServiceList().then(v => {
        that.serviceList = v.data;
        that.serviceList.forEach(v => {
          that.services[v.id + ""] = v;
        })
        if (!that.currentId) {
          that.currentId = that.serviceList[0].id;
        }
        that.initRewardType();
        that.initLotteryInfo();
      })
    },
    initRewardType: function () {
      getRewardType(this.currentId).then(v => {
        this.rewardType = v.data;
        this.rewardType.forEach(v => {
          this.type[v.name] = false;
        })
      })
    },
    onRefresh: function () {
      setTimeout(() => {
        this.refresh = false;
        this.loading = false;
        this.finished = true;
      }, 1000);
    },
    showHistory: function () {
      this.historyShow = !this.historyShow;
    },
    showBalance: function () {
      this.balanceShow = !this.balanceShow;
    },
    clickReward: function (reward) {
      let type = {...this.type};
      type[reward] = !type[reward];
      this.type = type;
    },
    showMenu: function () {
      this.menuShow = !this.menuShow;
    },
    changeMenu: function (menu) {
      this.currentId = menu;
      this.menuShow = false;
      this.initLotteryInfo();
    },
    refreshPage: function () {
      window.location.reload();
    },
    reward: function () {
      if (this.voteAmount <= 0) {
        Toast("打赏金额不能为0");
        return;
      }
      this.confirmShow = true;
    },
    closeDialog: function () {
      this.confirmShow = false;
    },
    clearReward: function () {
      this.reward_bsj = false;
      this.reward_jnh = false;
      this.reward_zsj = false;
      this.reward_hj = false;
      this.amount = '';
      this.confirmShow = false;
    },
    gotoRecord: function () {
      this.$router.push({name: 'RecordList'});
    },
    clickLeft: function () {
      window.history.go(-1);
    },
    initTimer: function () {
      let that = this;
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = undefined;
      }
      that.calculateTime();
      this.timer = setInterval(function () {
        that.calculateTime();
      }, 1000);
    },
    calculateTime: function () {
      let now = new Date().getTime(),
          diff = this.endTime - now,
          s = diff > 0 ? Math.floor((diff % (1000 * 60)) / 1000) : 0,
          m = diff > 0 ? Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60)) : 0,
          h = diff > 0 ? Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)) : 0;
      this.times = {
        s: String(s).padStart(2, "0"),
        m: String(m).padStart(2, "0"),
        h: String(h).padStart(2, "0")
      };
      if (diff <= 0 && this.currentId)
        this.initLotteryInfo();
    },
    submitReward: function () {
      let that = this, items = [];
      Object.keys(this.type).forEach(v => {
        if (this.type[v])
          items.push(v);
      });
      reward({
        item: items.join(","),
        money: that.amount,
        lid: that.currentInfo.id,
        mid: that.userInfo.id,
        expect: that.currentInfo.next_expect
      }).then(v => {
        Toast.success({
          message: "打赏成功",
          forbidClick: false,
          duration: 3000,
          onClose: function () {
            this.amount = '';
            Object.keys(that.type).forEach(v => {
              that.type[v] = false;
            });
          }
        })
        this.confirmShow = false;
        that.$store.dispatch("UpdateUserInfo");
      })
    }
  }
};
</script>
<style scoped>
::v-deep .van-nav-bar__left > i, ::v-deep .van-nav-bar__text, ::v-deep .van-nav-bar__title, ::v-deep .van-cell__title {
  color: var(--van-nav-bar-icon-color);
}

::v-deep .header .van-nav-bar .icon.up {
  transform: rotate(180deg);
}

::v-deep .wrapper .bottom-bar .bar .mid .van-field__control--center {
  color: #fff;
}

.kuaisan-ball {
  flex: 1;
  display: flex;
  align-items: center
}

.kuaisan-ball.left {
  justify-content: flex-start
}

.kuaisan-ball.center {
  justify-content: center
}

.kuaisan-ball.right {
  justify-content: right
}

.kuaisan-ball .res-ball {
  border-radius: 50%;
  background-color: #ff253f;
  text-align: center;
  color: #fff;
  margin-right: .13333rem;
  width: .64rem;
  height: .64rem;
  line-height: .64rem;
  font-size: .37333rem
}

.kuaisan-ball .res-img.middle {
  width: .74667rem;
  height: .74667rem;
  margin-right: .26667rem
}

.kuaisan-ball .res-img.small {
  width: .58667rem;
  height: .58667rem;
  margin-right: .13333rem
}

.kuaisan-ball .res-img.xs {
  width: .53333rem;
  height: .53333rem;
  margin-right: .13333rem
}

.kuaisan-ball .res-des {
  font-weight: 700;
  text-align: center;
  color: #fa59b5
}

.kuaisan-ball .res-wait {
  font-size: .35rem;
  color: #979799;
}

.kuaisan-ball .res-des.middle {
  font-size: .4rem;
  margin: 0 .05333rem
}

.kuaisan-ball .res-des.small {
  width: 18%;
  margin: 0 .08rem;
  font-size: .34667rem
}

.kuaisan-ball .res-des.xs {
  min-width: 10%;
  font-size: .29333rem
}

.mask {
  background-color: rgba(0, 0, 0, .4)
}

.confirm-order-modal {
  position: fixed;
  display: flex;
  flex-direction: column;
  margin: auto;
  padding: 0 .26667rem .4rem;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 8.93333rem;
  height: 9.33333rem;
  max-height: 50%;
  z-index: 10;
  background-color: #fcf0fa;
  border-radius: .21333rem
}

.confirm-order-modal .head {
  position: relative;
  height: 1.06667rem
}

.confirm-order-modal .head span:first-child {
  color: #ff253f
}

.confirm-order-modal .head .text {
  padding: 0 1.06667rem;
  height: 1.06667rem;
  line-height: 1.06667rem;
  text-align: center;
  font-size: .42667rem;
  font-weight: 500;
  color: #000
}

.confirm-order-modal .head .close {
  color: #000;
  position: absolute;
  top: 0;
  right: 0;
  width: 1.06667rem;
  height: 1.06667rem;
  line-height: 1.06667rem;
  text-align: center
}

.confirm-order-modal .list {
  flex: 1;
  padding: 0 .13333rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch
}

.confirm-order-modal .list .lise-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: .26667rem 0
}

.confirm-order-modal .list .lise-item .main {
  flex: 1;
  overflow: hidden
}

.confirm-order-modal .list .lise-item .main .bet-name {
  color: #ff253f;
  font-size: .37333rem;
  font-weight: 500;
  line-height: .42667rem;
  word-wrap: break-word;
  word-break: break-all
}

.confirm-order-modal .list .lise-item .main .detail {
  display: flex;
  align-items: center;
  margin-top: .13333rem
}

.confirm-order-modal .list .lise-item .main .detail .detail-text {
  line-height: .53333rem;
  font-size: .34667rem;
  color: #979799
}

.confirm-order-modal .list .lise-item .icon {
  color: #ff253f
}

.confirm-order-modal .sub-bar {
  display: flex;
  align-items: center;
  margin-top: .4rem;
  justify-content: space-around
}

.confirm-order-modal .sub-bar .item {
  min-width: 40%;
  height: 1.06667rem;
  text-align: center;
  line-height: 1.06667rem;
  box-sizing: border-box;
  border-radius: 1.06667rem;
  font-size: .37333rem;
  font-weight: 500;
  white-space: nowrap
}

.confirm-order-modal .sub-bar .item.cancel-btn {
  border: .02133rem solid #979799;
  color: #979799;
  background-color: #fcf0fa
}

.confirm-order-modal .sub-bar .item.sub-btn {
  background: linear-gradient(270deg, #fa59b5, #e38afb);
  color: #fff;
  border: 0
}

.shop-mall-modal {
  height: 3.2rem !important;
  justify-content: space-between
}

.scale-enter-from {
  opacity: 0;
  transform: scale(.7)
}

.scale-leave-to {
  opacity: 0
}

.scale-enter-to, .scale-leave-from {
  transition: all .15s cubic-bezier(.97, 1.73, .85, .77)
}

.mask {
  background-color: rgba(0, 0, 0, .4)
}

.confirm-order-modal {
  position: fixed;
  display: flex;
  flex-direction: column;
  margin: auto;
  padding: 0 .26667rem .4rem;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 8.93333rem;
  height: 5.33333rem;
  max-height: 50%;
  z-index: 10;
  background-color: #fcf0fa;
  border-radius: .21333rem
}

.confirm-order-modal .head {
  position: relative;
  height: 1.06667rem
}

.confirm-order-modal .head .text {
  padding: 0 1.06667rem;
  height: 1.06667rem;
  line-height: 1.06667rem;
  text-align: center;
  font-size: .42667rem;
  font-weight: 500;
  color: #e38afb
}

.confirm-order-modal .head .close {
  color: #000;
  position: absolute;
  top: 0;
  right: 0;
  width: 1.06667rem;
  height: 1.06667rem;
  line-height: 1.06667rem;
  text-align: center
}

.confirm-order-modal .list {
  flex: 1;
  padding: .26667rem .13333rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch
}

.confirm-order-modal .list .li-item {
  margin: .13333rem 0;
  text-align: center
}

.confirm-order-modal .list .li-item .color-span {
  color: #fa59b5;
  margin: 0 .13333rem
}

.confirm-order-modal .list .li-item span {
  font-size: .48rem
}

.confirm-order-modal .list .font-color {
  color: #c06786
}

.confirm-order-modal .list .lise-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: .26667rem 0
}

.confirm-order-modal .list .lise-item .main {
  flex: 1;
  overflow: hidden
}

.confirm-order-modal .list .lise-item .main .bet-name {
  color: #ff253f;
  font-size: .37333rem;
  font-weight: 500;
  line-height: .42667rem;
  word-wrap: break-word;
  word-break: break-all
}

.confirm-order-modal .list .lise-item .main .detail {
  display: flex;
  align-items: center;
  margin-top: .13333rem
}

.confirm-order-modal .list .lise-item .main .detail .detail-text {
  line-height: .53333rem;
  font-size: .34667rem;
  color: #979799
}

.confirm-order-modal .list .lise-item .icon {
  color: #ff253f
}

.confirm-order-modal .sub-bar {
  display: flex;
  align-items: center;
  margin-top: .4rem;
  justify-content: space-around
}

.confirm-order-modal .sub-bar .item {
  min-width: 40%;
  height: 1.06667rem;
  text-align: center;
  line-height: 1.06667rem;
  box-sizing: border-box;
  border-radius: .10667rem;
  font-size: .37333rem;
  font-weight: 500
}

.confirm-order-modal .sub-bar .item.cancel-btn {
  border: .02133rem solid #979799;
  color: #979799;
  background-color: #fcf0fa
}

.confirm-order-modal .sub-bar .item.sub-btn {
  background: #d31b31;
  color: #fff;
  border: 0
}

.shop-mall-modal {
  height: 3.2rem !important;
  justify-content: space-between
}

.scale-enter-from {
  opacity: 0;
  transform: scale(.7)
}

.scale-leave-to {
  opacity: 0
}

.scale-enter-to, .scale-leave-from {
  transition: all .15s cubic-bezier(.97, 1.73, .85, .77)
}


.bottom-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.06667rem;
  z-index: 2
}

.bottom-bar .bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 1.06667rem;
  background-color: #fcf0fa;
  box-shadow: 0 0 .13333rem 0 #cacaca;
  z-index: 2
}

.bottom-bar .bar .left {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-left: .26667rem
}

.bottom-bar .bar .left span {
  font-size: .34667rem;
  vertical-align: center;
  color: #fff
}

.bottom-bar .bar .left .margin-span {
  margin-right: .26667rem
}

.bottom-bar .bar .left .item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.33333rem
}

.bottom-bar .bar .left .item .badge {
  position: absolute;
  top: 5%;
  right: 5%;
  padding: 0 .08rem;
  min-width: .42667rem;
  font-size: .32rem;
  font-weight: 500;
  background-color: #ee0a24;
  color: #fff;
  box-sizing: border-box;
  font-family: -apple-system-font, Helvetica Neue, Arial, sans-serif;
  line-height: 1.2;
  text-align: center;
  border-radius: 26.64rem;
  border: .02667rem solid #fff
}

.bottom-bar .bar .left .item .icon-default {
  color: #fff
}

.bottom-bar .bar .left .item .icon-cart {
  color: #fa59b5
}

.bottom-bar .bar .left .item .text {
  font-size: .37333rem;
  color: #fff;
  font-weight: 700
}

.bottom-bar .bar .left .line {
  width: .02133rem;
  height: .48rem;
  background: #dadada
}

.bottom-bar .bar .mid {
  flex: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column
}

.bottom-bar .bar .mid .text {
  font-size: .34667rem;
  font-weight: 500;
  line-height: .42667rem;
  color: #fff
}

.bottom-bar .bar .mid .text.num {
  margin: 0 .05333rem;
  color: #ff253f
}

.bottom-bar .bar .mid .input {
  margin: 0 auto;
  width: 5.33333rem;
  padding: .08rem .26667rem;
  line-height: .42667rem;
  border-bottom: .02133rem solid #fff;
  border-radius: .10667rem;
  font-size: .34667rem;
  background-color: #7e614a
}

.bottom-bar .bar .mid .short-input {
  width: 3.46667rem
}

.bottom-bar .bar .right {
  padding: 0 .53333rem;
  margin: 0 .26667rem;
  color: #fff;
  background: #e6ac75;
  font-size: .42667rem;
  font-weight: 500;
  height: .8rem;
  line-height: .8rem;
  border-radius: .05333rem
}

.bottom-bar .wrapper {
  position: absolute;
  top: 1.46667rem;
  left: 0;
  right: 0;
  padding: 0 .26667rem 1.6rem .26667rem;
  background-color: #7e614a;
  width: 100%;
  z-index: 1;
  box-shadow: 0 0 .13333rem 0 #cacaca;
  transition: transform .3s cubic-bezier(.21, 1.02, .55, 1.01)
}

.bottom-bar .wrapper.active {
  transform: translateY(-100%)
}

.bottom-bar .wrapper .item {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  height: .8rem
}

.bottom-bar .wrapper .item .label {
  font-size: .34667rem;
  line-height: .53333rem;
  color: #fff
}

.bottom-bar .wrapper .item .each-amount-span {
  margin: 0 .13333rem
}

.bottom-bar .wrapper .item .betMul-item-span {
  margin-right: .26667rem
}

.bottom-bar .wrapper .item .bet-number {
  flex: 1;
  margin: 0 .13333rem;
  overflow: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  color: #ff253f;
  font-size: .34667rem;
  font-weight: 500;
  height: .53333rem;
  line-height: .53333rem
}

.bottom-bar .wrapper .item .amountBorder {
  border-color: #fff !important
}

.bottom-bar .wrapper .item .amount-wrapper {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center
}

.bottom-bar .wrapper .item .amount-wrapper .input {
  margin-right: .13333rem;
  width: 2.26667rem;
  padding: .08rem .26667rem;
  line-height: .42667rem;
  border: .02133rem solid #fff;
  border-radius: .10667rem;
  font-size: .34667rem;
  background-color: #fff
}

.bottom-bar .wrapper .item .pre-btn {
  padding: .13333rem .26667rem;
  color: #fa59b5;
  border: .02133rem solid #fa59b5;
  border-radius: .10667rem
}

.bottom-bar .wrapper .item .part {
  margin-right: .26667rem
}

.bottom-bar .wrapper .item .part .input {
  margin: 0 auto;
  width: 2.13333rem;
  padding: .08rem .26667rem;
  line-height: .42667rem;
  border-bottom: .02133rem solid #fff;
  border-radius: .10667rem;
  font-size: .34667rem;
  background-color: #282828
}

.bottom-bar .wrapper .item .part .number {
  margin: 0 .05333rem;
  font-weight: 500
}

.bottom-bar .wrapper .item .part span {
  font-size: .34667rem;
  vertical-align: center;
  color: #fff
}

.bottom-bar .wrapper .item .part .margin-span {
  margin-right: .26667rem
}

.bottom-bar .wrapper .item .part .eye-icon {
  font-size: .4rem;
  margin-left: .13333rem;
  color: #fff
}

.bottom-bar .wrapper .item .arrow-right {
  font-weight: bolder;
  color: #ff253f
}

.bottom-bar .wrapper .amount-select .amount-item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  height: 100%
}

.bottom-bar .wrapper .amount-select .amount-item span {
  color: #fff
}

.bottom-bar .wrapper .amount-select .amount-item .icon-img {
  position: absolute;
  top: 0;
  width: 1.06667rem;
  height: 1.06667rem;
  -o-object-fit: contain;
  object-fit: contain;
  z-index: -1
}

.van-field__control {
  color: #fff
}

.cate-bounce-enter-from {
  transform: scale(.6)
}

.cate-bounce-enter-from, .cate-bounce-enter-to {
  transition: all .2s cubic-bezier(.89, 3, .75, .5)
}

.van-number-keyboard {
  position: absolute !important;
  bottom: 2.13333rem !important
}


.rectangle {
  overflow: hidden
}

.rectangle.large {
  margin: 0 0 .4rem 4%;
  width: 44%;
  border-radius: .05333rem
}

.rectangle.large .wrapper {
  padding-bottom: 30%
}

.rectangle.middle {
  margin: 0 0 .24rem 2.5%;
  width: 45%;
  border-radius: .13333rem
}

.rectangle.middle .wrapper {
  padding-bottom: 40%
}

.rectangle.small {
  margin: 0 0 .21333rem 4%;
  width: 20%;
  border-radius: .13333rem
}

.rectangle.small .wrapper {
  padding-bottom: 50%
}

.rectangle.small .wrapper .content {
  display: flex;
  align-items: center;
  justify-content: center
}

.rectangle.active .wrapper {
  border: .02667rem solid #fa59b5
}

.rectangle.active .wrapper .name-text {
  color: #fa59b5 !important
}

.rectangle.active .wrapper .odd-text {
  color: #fff !important
}

.rectangle .black-bg {
  background: #565656 !important
}

.rectangle .black-bg .name-text {
  color: #fff !important
}

.rectangle .wrapper {
  position: relative;
  padding: 0 .13333rem;
  background: #fcf0fa;
  border: .02667rem solid transparent
}

.rectangle .wrapper .center-div {
  justify-content: space-around !important
}

.rectangle .wrapper .content {
  position: absolute;
  display: flex;
  top: 0;
  left: 0;
  padding: 0 .4rem;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%
}

.rectangle .wrapper .content .name-text {
  color: #7d7c7c;
  font-weight: bolder
}

.rectangle .wrapper .content .name-text.large {
  font-size: .37333rem
}

.rectangle .wrapper .content .name-text.middle {
  font-size: .42667rem
}

.rectangle .wrapper .content .name-text.small {
  font-size: .37333rem
}

.rectangle .wrapper .content .odd-text {
  text-align: center;
  color: #fa59b5
}

.rectangle .wrapper .content .odd-text.large {
  font-size: .32rem;
  margin-top: .08rem
}

.rectangle .wrapper .content .odd-text.middle, .rectangle .wrapper .content .odd-text.small {
  font-size: .26667rem;
  margin-top: .05333rem
}

.rectangle .wrapper .content img {
  height: 1.06667rem;
  -o-object-fit: contain;
  object-fit: contain
}

.shopMall-div {
  margin-left: .26667rem;
  width: 2.16rem;
  height: .66667rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: .10667rem;
  background-color: #e2e2e2;
  color: #000;
  font-size: .37333rem;
  font-weight: 500
}

.active-shopMall-div {
  color: #fff;
  background-color: #fecf3b
}

.need-padding-bottom {
  padding: .26667rem 0 4rem !important
}

.pink-sum {
  padding: .26667rem !important;
  flex-wrap: wrap;
  flex-direction: row !important
}

.pink-sum .bet-btn-div, .pink-sum {
  justify-content: space-between !important
}

.sumValueTwoSides {
  display: flex;
  padding: .26667rem 0;
  overflow: auto;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start
}

.sumValueTwoSides .top-cmp {
  margin-bottom: 3.73333rem
}

.sumValueTwoSides .bet-btn-div {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap
}

.sumValueTwoSides .short-bg-img {
  width: calc(100% - 3.2rem) !important
}

.sumValueTwoSides .show-mall-div {
  width: calc(100% - .53333rem);
  margin: .26667rem auto;
  height: 4.8rem;
  background-image: url(../assets/img/tip/shopMall.png);
  background-size: cover;
  background-position: 50%;
  border-radius: .10667rem
}

.sumValueTwoSides .show-mall-div ul {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  background-color: rgba(0, 0, 0, .4)
}

.sumValueTwoSides .show-mall-div ul li {
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 1.6rem;
  width: 100%;
  display: flex
}

.sumValueTwoSides .show-mall-div ul > li:first-child img {
  height: 1.06667rem;
  margin-right: .26667rem;
  border-radius: .10667rem;
  opacity: .6
}

.sumValueTwoSides .show-mall-div ul > li:first-child span {
  font-size: .66667rem;
  font-weight: 700;
  color: #c8c8c8
}

.sumValueTwoSides .show-mall-div ul > li:nth-child(2) {
  font-size: .4rem;
  color: #c8c8c8;
  font-weight: 700;
  padding: 0 1.06667rem
}

.sumValueTwoSides .show-mall-div ul > li:nth-child(3) {
  font-size: .64rem;
  color: #ffb94f;
  font-weight: 700;
  font-family: PingFangSC-Medium, PingFang SC
}

.sumValueTwoSides .shop-mall-img {
  display: block;
  width: calc(100% - .53333rem);
  margin: .26667rem auto;
  -o-object-fit: contain;
  object-fit: contain
}

.linear-gradient {
  width: 100%;
  height: .02667rem
}

.options-bar {
  display: flex;
  align-items: center;
  height: calc(100% - 1.33333rem)
}

.options-bar .left {
  width: 2.53333rem;
  height: 100%;
  overflow-y: auto;
  background-color: #fcf0fa;
  -webkit-overflow-scrolling: touch;
  border-radius: .16rem .16rem 0 0
}

.options-bar .left::-webkit-scrollbar {
  display: none
}

.options-bar .left .item .item-section {
  padding: .08rem .13333rem;
  line-height: .37333rem;
  background-color: #fa59b5;
  color: #fcf0fa;
  text-align: center;
  font-size: .29333rem;
  font-family: Arial, Microsoft YaHei, 黑体, 宋体, sans-serif;
  font-weight: 500
}

.options-bar .left .item .item-type {
  position: relative
}

.options-bar .left .item .item-type .type-line {
  display: flex;
  align-items: center;
  position: absolute;
  left: .13333rem;
  top: 0;
  bottom: 0
}

.options-bar .left .item .item-type .type-line .content {
  width: .08rem;
  height: .53333rem;
  background-color: #e38afb
}

.options-bar .left .item .item-type .type-text {
  flex: 1;
  padding: .4rem .13333rem .4rem .34667rem;
  text-align: center;
  font-size: .37333rem;
  min-height: 1.33333rem;
  line-height: .53333rem;
  font-weight: 500;
  color: #000
}

.options-bar .left .item .item-type .type-text.active {
  color: #e38afb
}

.options-bar .left .fill {
  height: .53333rem
}

.options-bar .right {
  flex: 1;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch
}

.options-bar .right .tips {
  display: flex;
  align-items: center;
  height: 1.06667rem;
  padding: 0 .26667rem
}

.options-bar .right .tips .odds {
  flex: 1;
  font-size: .34667rem;
  font-weight: 500;
  color: #ff253f
}

.options-bar .right .tips .play-tip {
  display: flex;
  align-items: center;
  height: 100%
}

.options-bar .right .tips .play-tip .icon {
  color: #ff253f
}

.options-bar .right .tips .play-tip .span-text {
  margin-left: .05333rem;
  font-size: .34667rem;
  font-weight: bolder;
  color: #ff253f;
  font-family: Arial, Microsoft YaHei, 黑体, 宋体, sans-serif
}

.playType {
  position: absolute;
  top: 1.22667rem;
  left: 0;
  right: 0;
  height: 5.33333rem;
  z-index: 3;
  background-color: #f4f4f4;
  overflow-y: auto
}

.playType .van-tabs__wrap {
  height: .66667rem;
  margin: .13333rem auto .13333rem
}

.playType .van-tabs__wrap .van-tabs__nav {
  background-color: transparent
}

.playType .van-tabs__wrap .van-tabs__nav .van-tab {
  padding: 0 .13333rem
}

.playType .van-tabs__content {
  border-top: .02667rem solid rgba(0, 0, 0, .2) !important
}

.playType .van-sticky {
  top: 1.33333rem !important
}

.playType .tab-title {
  padding: 0 .66667rem;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  border-radius: .05333rem;
  border: .02667rem solid #bfbfbf;
  font-size: .34667rem;
  font-weight: 400
}

.playType .active-lottery-type {
  color: #fff !important;
  background-color: #e38afb !important;
  border: 0
}

.playType .lottery-content {
  padding: .26667rem 0 .53333rem .26667rem;
  height: 3.2rem
}

.playType .lottery-content > ul {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
  overflow: auto
}

.playType .lottery-content > ul > li {
  height: .53333rem;
  margin: 0 .26667rem;
  font-size: .34667rem
}

.playType .lottery-content > ul > li:not(:first-child) {
  padding: 0 .53333rem;
  border: .02667rem solid #bfbfbf;
  margin-bottom: .13333rem;
  display: flex;
  align-items: center;
  justify-content: center
}

.playType-slide-down-enter-from, .playType-slide-down-leave-to {
  transform: translateY(-100%) !important;
  transition: transform .35s
}

.playType-slide-down-enter-to, .playType-slide-down-leave-from {
  transition: transform .35s
}

.header {
  z-index: 4
}

.header .nav {
  background: linear-gradient(90deg, #fff, #fff);
  z-index: 4;
  color: #fa59b5
}

.header .nav .icon {
  font-weight: bolder;
  transition: transform .35s;
  margin-left: .13333rem
}

.header .nav .right-lottery {
  padding-left: .13333rem;
  padding-right: .13333rem;
  color: #e38afb;
  font-size: .32rem;
  border-radius: .13333rem;
  border: .02667rem solid #e38afb;
  line-height: .74667rem
}

.header .nav .right {
  color: #fa59b5
}

.header .nav .nav-title-div .icon {
  font-weight: bolder;
  transition: transform .35s
}

.header .nav .nav-title-div .icon.up {
  transform: rotate(180deg)
}

.record {
  position: relative;
  padding-left: .26667rem;
  padding-right: .26667rem;
  background-color: #16151b;
  border-top: .26667rem solid #836045;
  border-bottom: .26667rem solid #81644f;
  z-index: 1
}

.record .period {
  display: flex;
  align-items: center;
  padding: .13333rem 0;
  border-bottom: .05333rem solid #000
}

.record .period span {
  color: #fff
}

.record .period .margin-span {
  margin-right: .26667rem
}

.record .period .cover {
  width: .66667rem;
  height: .66667rem;
  -o-object-fit: cover;
  object-fit: cover
}

.record .period .cover-error {
  width: .8rem;
  height: .8rem;
  background-color: #fcf0fa;
  border-radius: .08rem
}

.record .period .period-number {
  margin-left: .26667rem;
  margin-right: .26667rem;
  height: .8rem;
  line-height: .8rem;
  font-size: .4rem;
  font-weight: 700;
  font-family: Arial, Microsoft YaHei, 黑体, 宋体, sans-serif;
  color: #fff
}

.record .period .period-number-null {
  background-color: #fcf0fa
}

.record .period .clock {
  display: flex;
  align-items: center
}

.record .period .clock .text {
  font-size: .48rem;
  color: #ff253f;
  font-weight: 500
}

.record .period .clock .label {
  margin-left: .05333rem;
  margin-right: .05333rem;
  font-size: .48rem;
  line-height: .53333rem;
  color: #ff253f;
  padding-bottom: 3%;
  font-weight: 500
}

.record .recent {
  display: flex;
  align-items: center;
  height: .8rem
}

.record .recent > span {
  color: #fff;
  margin-right: .10667rem
}

.record .recent .period-span {
  color: #fa59b5
}

.record .recent .icon {
  font-weight: bolder;
  transition: transform .35s;
  color: #fff
}

.record .recent .icon.up {
  transform: rotate(180deg)
}

.history-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  background-color: rgba(0, 0, 0, .4)
}

.history {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 8rem;
  z-index: 2;
  background-color: #fcf0fa;
  overflow-y: auto
}

.history .wrapper {
  min-height: 8rem
}

.history .wrapper .height-item {
  padding: .21333rem 0 !important
}

.history .wrapper .item {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: .13333rem 0
}

.history .wrapper .odd .left {
  width: 30%;
  font-size: .32rem;
  text-align: center;
  font-weight: 500;
  color: #fff
}

.history .wrapper .even .left {
  width: 30%;
  font-size: .32rem;
  text-align: center;
  font-weight: 500;
  color: #fa59b5
}

.history .wrapper .item .right {
  flex: 1;
  display: flex;
  justify-content: center;
  overflow: hidden;
  color: #fff
}

.history .wrapper .odd {
  background-color: #282828
}

.history .wrapper .even {
  background-color: #fcf0fa
}

.history .shop-wrapper {
  min-height: 8rem
}

.history .shop-wrapper .item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .13333rem 0;
  color: #000
}

.history .shop-wrapper .item > div {
  width: 33%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .37333rem
}

.history .shop-wrapper .even, .history .shop-wrapper .odd {
  background-color: #fcf0fa
}

.history .font-weight {
  font-weight: 700 !important
}

.history .font-12 {
  font-size: .32rem
}

.history-slide-down-enter-from, .history-slide-down-leave-to {
  transform: translateY(-100%) !important;
  transition: transform .35s
}

.history-slide-down-enter-to, .history-slide-down-leave-from {
  transition: transform .35s
}


.black-bg {
  background: #16151b !important
}

.lottery-index {
  display: flex;
  flex-direction: column;
  bottom: 0;
  background: #fcf0fa
}

.lottery-index .wrapper {
  position: relative;
  flex: 1;
  overflow: hidden
}

.lottery-index .icon-sx-div {
  position: absolute;
  background-color: #000;
  bottom: 2.66667rem;
  right: .53333rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: .8rem;
  height: .8rem;
  border-radius: 50%;
  z-index: 100
}

.lottery-index .icon-sx-div .icon {
  color: #fa59b5
}


.mask[data-v-361f4d06] {
  background-color: rgba(0, 0, 0, .4)
}

.prompt[data-v-361f4d06] {
  position: fixed;
  margin: auto;
  padding: 0 .4rem .4rem;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 8rem;
  height: 4.53333rem;
  z-index: 99;
  background-color: #fcf0fa;
  border-radius: .10667rem
}

.prompt .title[data-v-361f4d06] {
  height: 1.33333rem;
  line-height: 1.33333rem;
  text-align: center;
  padding: 0 .26667rem;
  font-size: .37333rem;
  font-weight: 500;
  color: #000
}

.prompt .wrapper[data-v-361f4d06] {
  display: flex;
  align-items: center
}

.prompt .wrapper .input[data-v-361f4d06] {
  padding: .21333rem .26667rem;
  border: .02667rem solid #f2f2f5;
  border-radius: .08rem;
  line-height: .53333rem;
  font-size: .37333rem;
  font-weight: 500;
  color: #5d5d5d;
  box-sizing: border-box;
  background-color: #f2f2f5
}

.prompt .wrapper span[data-v-361f4d06] {
  margin-left: .26667rem;
  font-size: .42667rem;
  color: #000
}

.prompt .side[data-v-361f4d06] {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: .93333rem
}

.prompt .side .cancel[data-v-361f4d06] {
  width: 23%;
  line-height: 1.06667rem;
  text-align: center;
  font-size: .34667rem;
  color: #858383
}

.prompt .side .determine[data-v-361f4d06] {
  width: 23%;
  line-height: 1.06667rem;
  text-align: center;
  font-size: .34667rem;
  font-weight: 500;
  color: #e38afb
}

[data-v-361f4d06] .van-field__control {
  color: #fff
}

.scale-enter-from[data-v-361f4d06] {
  opacity: 0;
  transform: scale(.7)
}

.scale-leave-to[data-v-361f4d06] {
  opacity: 0
}

.scale-enter-to[data-v-361f4d06], .scale-leave-from[data-v-361f4d06] {
  transition: all .15s cubic-bezier(.97, 1.73, .85, .77)
}

.mask[data-v-6f027b9a] {
  background-color: rgba(0, 0, 0, .3)
}

.lottery-cart[data-v-6f027b9a] {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 85%;
  z-index: 10;
  border-radius: .4rem .4rem 0 0;
  background-color: #fcf0fa;
  box-shadow: 0 -.13333rem .26667rem 0 #979799
}

.lottery-cart .head[data-v-6f027b9a] {
  display: flex;
  align-items: center;
  height: 1.33333rem;
  padding: 0 .26667rem
}

.lottery-cart .head .left[data-v-6f027b9a] {
  flex: 1;
  font-size: .37333rem;
  color: #000;
  font-weight: 500
}

.lottery-cart .head .clock[data-v-6f027b9a] {
  display: flex;
  align-items: center
}

.lottery-cart .head .clock .text[data-v-6f027b9a] {
  vertical-align: center;
  font-size: .42667rem;
  line-height: .53333rem;
  height: .53333rem;
  color: #ff253f;
  font-weight: 500
}

.lottery-cart .head .clock .label[data-v-6f027b9a] {
  font-size: .42667rem;
  color: #ff253f;
  padding-bottom: 3%;
  font-weight: 500
}

.lottery-cart .wrapper[data-v-6f027b9a] {
  padding: 0 .26667rem;
  height: calc(100% - 2.66666rem);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch
}

.lottery-cart .wrapper .table[data-v-6f027b9a] {
  margin-bottom: .26667rem;
  border-left: .02133rem solid #979799;
  border-top: .02133rem solid #979799
}

.lottery-cart .wrapper .table .td[data-v-6f027b9a] {
  padding: .13333rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: .93333rem;
  border-bottom: .02133rem solid #979799;
  border-right: .02133rem solid #979799;
  overflow: hidden
}

.lottery-cart .wrapper .table .td .thead[data-v-6f027b9a] {
  font-size: .32rem;
  color: #7d7c7c;
  font-weight: 500;
  text-align: center
}

.lottery-cart .wrapper .table .td .t-content[data-v-6f027b9a] {
  font-size: .32rem;
  color: #000;
  font-weight: 500;
  word-wrap: break-word;
  word-break: break-all;
  line-height: .37333rem;
  text-align: center
}

.lottery-cart .wrapper .table .td .t-content.money[data-v-6f027b9a] {
  width: 80%;
  height: .58667rem;
  line-height: .58667rem;
  border: .02133rem solid #cacaca;
  text-align: center;
  border-radius: .08rem
}

.lottery-cart .wrapper .table .td .icon[data-v-6f027b9a] {
  color: #ff253f
}

.lottery-cart .wrapper .table .empty[data-v-6f027b9a] {
  height: 30vh;
  line-height: 30vh;
  border-bottom: .02133rem solid #979799;
  border-right: .02133rem solid #979799;
  text-align: center;
  font-size: .37333rem;
  font-weight: 500;
  color: #000
}

.lottery-cart .bar[data-v-6f027b9a] {
  display: flex;
  align-items: center;
  padding: 0 .26667rem;
  height: 1.33333rem;
  box-shadow: 0 0 .18667rem 0 #585858
}

.lottery-cart .bar .left[data-v-6f027b9a] {
  padding: 0 .26667rem;
  min-width: 1.86667rem;
  background-color: #cacaca;
  color: #fff;
  height: .96rem;
  line-height: .96rem;
  text-align: center;
  border-radius: .8rem;
  font-size: .4rem;
  font-weight: 500
}

.lottery-cart .bar .content[data-v-6f027b9a] {
  flex: 1
}

.lottery-cart .bar .content .row[data-v-6f027b9a] {
  display: flex;
  align-items: center;
  justify-content: center;
  height: .48rem
}

.lottery-cart .bar .content .row .text[data-v-6f027b9a] {
  font-size: .34667rem;
  color: #000;
  line-height: .4rem
}

.lottery-cart .bar .content .row .text.text-red[data-v-6f027b9a] {
  margin: 0 .02667rem;
  color: #ff253f;
  font-weight: 500
}

.lottery-cart .bar .right[data-v-6f027b9a] {
  padding: 0 .26667rem;
  min-width: 1.86667rem;
  height: .96rem;
  line-height: .96rem;
  border-radius: .8rem;
  font-size: .4rem;
  font-weight: 500;
  background: linear-gradient(90deg, #fa59b5, #e38afb);
  color: #fff;
  border: none
}

.cart-up-enter-from[data-v-6f027b9a], .cart-up-leave-to[data-v-6f027b9a] {
  opacity: 0;
  transition: all .35s;
  transform: translateY(30%)
}

.cart-up-enter-to[data-v-6f027b9a], .cart-up-leave-from[data-v-6f027b9a] {
  transition: all .35s
}

.mask[data-v-9681099e] {
  background-color: rgba(0, 0, 0, .4)
}

.play-type-tip[data-v-9681099e] {
  position: fixed;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 8.93333rem;
  height: 9.33333rem;
  max-height: 50%;
  z-index: 10;
  border-radius: .21333rem;
  overflow: hidden;
  background-color: #fff;
  color: #000
}

.play-type-tip .title[data-v-9681099e] {
  line-height: 1.06667rem;
  background: linear-gradient(90deg, #fff, #fff);
  text-align: center;
  color: #fff;
  font-size: .4rem;
  font-weight: 500
}

.play-type-tip .wrapper[data-v-9681099e] {
  height: calc(100% - 1.06667rem);
  background-color: transparent;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch
}

.play-type-tip .wrapper .item[data-v-9681099e] {
  padding: .53333rem .4rem;
  display: flex;
  align-items: flex-start
}

.play-type-tip .wrapper .item .icon[data-v-9681099e] {
  color: #fa59b5
}

.play-type-tip .wrapper .item .content[data-v-9681099e] {
  flex: 1;
  margin-left: .26667rem
}

.play-type-tip .wrapper .item .content .content-title[data-v-9681099e] {
  font-size: .37333rem;
  font-weight: 500;
  color: #fff;
  line-height: .53333rem
}

.play-type-tip .wrapper .item .content .content-detail[data-v-9681099e] {
  margin-top: .13333rem;
  font-size: .29333rem;
  color: #000;
  line-height: .45333rem
}

.scale-enter-from[data-v-9681099e] {
  opacity: 0;
  transform: scale(.7)
}

.scale-leave-to[data-v-9681099e] {
  opacity: 0
}

.scale-enter-to[data-v-9681099e], .scale-leave-from[data-v-9681099e] {
  transition: all .15s cubic-bezier(.97, 1.73, .85, .77)
}

.mask[data-v-6a1c3c34] {
  top: 1.02667rem;
  background-color: rgba(0, 0, 0, .3)
}

.list[data-v-6a1c3c34] {
  position: absolute;
  right: 0;
  top: 0;
  padding-left: .26667rem;
  padding-right: .26667rem;
  height: 100%;
  width: 100%;
  background-color: #f4ebf3;
  z-index: 2;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch
}

.list .group[data-v-6a1c3c34] {
  margin-top: .26667rem;
  margin-bottom: .26667rem;
  border-radius: .21333rem
}

.list .group .title[data-v-6a1c3c34] {
  font-weight: 600;
  font-size: .4rem;
  font-family: Arial, Microsoft YaHei, 黑体, 宋体, sans-serif;
  height: 1.06667rem;
  line-height: 1.06667rem;
  padding-left: 5%;
  padding-right: 5%;
  color: #fff
}

.list .group .wrapper[data-v-6a1c3c34] {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap
}

.list .group .wrapper[data-v-6a1c3c34] :active {
  opacity: .6
}

.list .group .wrapper .item[data-v-6a1c3c34] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 33%;
  height: 1.06667rem;
  padding: 0 .08rem
}

.list .group .wrapper .item .cover[data-v-6a1c3c34] {
  width: 90%;
  height: .66667rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f5dcf1;
  border-radius: .10667rem
}

.list .group .wrapper .item .cover .img[data-v-6a1c3c34] {
  width: 3.2rem;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: .10667rem
}

.list .group .wrapper .item .cover .img-disable[data-v-6a1c3c34] {
  filter: grayscale(100%)
}

.list .group .wrapper .item .cover span[data-v-6a1c3c34] {
  font-size: .34667rem;
  color: #fa59b5
}

.list .group .wrapper .item .name[data-v-6a1c3c34] {
  height: .8rem;
  display: flex;
  font-size: .32rem;
  font-weight: 500;
  color: #fff;
  word-break: break-all;
  justify-content: center;
  align-items: center;
  text-align: center;
  overflow: hidden
}

.history-slide-down-leave-enter-from[data-v-6a1c3c34], .history-slide-down-leave-leave-to[data-v-6a1c3c34] {
  opacity: 0;
  transform: translateY(-100%) !important;
  transition: transform .35s, opacity .35s
}

.history-slide-down-leave-enter-to[data-v-6a1c3c34], .history-slide-down-leave-leave-from[data-v-6a1c3c34] {
  transition: transform .35s, opacity .35s
}

.record[data-v-c08f5d52] {
  position: relative;
  padding-left: .26667rem;
  padding-right: .26667rem;
  background-color: #fcf0fa;
  box-shadow: 0 .08rem .13333rem 0 #cacaca;
  z-index: 1
}

.record .period[data-v-c08f5d52] {
  display: flex;
  align-items: center;
  padding: .13333rem 0;
  justify-content: space-between
}

.record .period > span[data-v-c08f5d52]:first-child {
  font-size: .32rem;
  font-weight: 500;
  color: #000
}

.record .period .cover[data-v-c08f5d52] {
  width: .66667rem;
  height: .66667rem;
  -o-object-fit: cover;
  object-fit: cover
}

.record .period .cover-error[data-v-c08f5d52] {
  width: .8rem;
  height: .8rem;
  background-color: #fcf0fa;
  border-radius: .08rem
}

.record .period .period-number[data-v-c08f5d52] {
  flex: 1;
  margin-left: .26667rem;
  margin-right: .26667rem;
  height: .8rem;
  line-height: .8rem;
  font-size: .4rem;
  font-weight: 700;
  font-family: Arial, Microsoft YaHei, 黑体, 宋体, sans-serif;
  color: #fff
}

.record .period .period-number-null[data-v-c08f5d52] {
  background-color: #fcf0fa
}

.record .period .clock[data-v-c08f5d52] {
  display: flex;
  align-items: center
}

.record .period .clock .text[data-v-c08f5d52] {
  font-size: .48rem;
  color: #ff253f;
  font-weight: 500
}

.record .period .clock .label[data-v-c08f5d52] {
  margin-left: .05333rem;
  margin-right: .05333rem;
  font-size: .48rem;
  line-height: .53333rem;
  color: #ff253f;
  padding-bottom: 3%;
  font-weight: 500
}

.record .recent[data-v-c08f5d52] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 1.2rem;
  color: #000
}

.record .recent > div[data-v-c08f5d52]:nth-child(2), .record .recent > div[data-v-c08f5d52]:nth-child(3) {
  font-size: .37333rem;
  font-weight: 500
}

.record .recent > div[data-v-c08f5d52]:first-child {
  font-size: .32rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column
}
</style>
